<template>
	<!-- 首页标题 -->
	<div class="g-title">
		<h2>城市</h2>
		<input type="text" placeholder="请输入搜索内容" />
		<h2>登录</h2>
	</div>

	<!-- 轮播区域 -->
	<van-swipe :autoplay="3000" indicator-color="white">
		<van-swipe-item v-for="item in bannerList" :key="item.id">
			<van-image :src="item.url" width="100%" height="200"></van-image>
		</van-swipe-item>
	</van-swipe>

	<!-- 商品分类 -->
	<van-grid>
		<van-grid-item v-for="item in categoryList" :key="item.id">
			<van-image :src="item.icon" width="60" />
			<p style="margin-top: 10px; font-size: 14px">{{ item.name }}</p>
		</van-grid-item>
	</van-grid>

	<!-- 商品列表 -->
	<van-list>
		<van-card
			v-for="item in goodsList"
			:key="item.id"
			:num="item.num"
			:price="item.price"
			:desc="item.description"
			:title="item.name"
			:thumb="item.url"
			@click="bindGoodDetail(item.id)"
		/>
	</van-list>
</template>

<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
import router from '@/router/index'

const bannerList = ref([]) // 轮播列表
const categoryList = ref([]) //分类列表
const goodsList = ref([]) //商品列表
/**
 * 调用后端接口，获取轮播列表数据
 */
const getBanner = () => {
	//http://www.axios-js.com/zh-cn/docs/
	axios({
		url: 'http://localhost:3000/banners',
		method: 'GET',
	}).then(res => {
		const data = res.data
		if (data.code == 1) {
			bannerList.value = data.list
		}
	})
}

/**
 * 商品分类
 */
const getCategory = () => {
	axios({
		url: 'http://localhost:3000/categoryes',
		method: 'GET',
	}).then(res => {
		const data = res.data
		if (data.code == 1) {
			categoryList.value = data.list
		}
	})
}

/**
 * 商品列表
 */
const getGoods = () => {
	axios({
		url: 'http://localhost:3000/goods',
		method: 'GET',
	}).then(res => {
		const data = res.data
		if (data.code == 1) {
			goodsList.value = data.list
		}
	})
}

/** 
 * 跳转到商品详情
*/
const bindGoodDetail = (id)=>{
	router.push({path:'/detail',query:{id}})
}


/**
 * vue组件挂载生命周期
 */
onMounted(() => {
	getBanner()
	getCategory()
	getGoods()
})
</script>

<style lang="css" scoped>
.g-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #ff0000;
	height: 40px;
}
.g-title h2 {
	color: white;
	font-size: 16px;
	font-weight: normal;
	width: 60px;
	text-align: center;
}
.g-title input {
	flex: 1;
	border: none;
	outline: none;
	height: 30px;
	border-radius: 8px;
	text-indent: 5px;
	font-size: 14px;
}
</style>
